<template>
  <div class="todo-footer">
    <el-card>
      <div class="footer-content">
        <span>总计: {{ count }} 项</span>
        <div class="filter-buttons">
          <el-button-group>
            <el-button
              :type="currentFilter === 'all' ? 'primary' : ''"
              @click="handleFilter('all')"
            >
              全部
            </el-button>
            <el-button
              :type="currentFilter === 'not-complete' ? 'primary' : ''"
              @click="handleFilter('not-complete')"
            >
              未完成
            </el-button>
            <el-button
              :type="currentFilter === 'completed' ? 'primary' : ''"
              @click="handleFilter('completed')"
            >
              已完成
            </el-button>
          </el-button-group>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  count: {
    type: Number,
    required: true,
  },
})

const emit = defineEmits(['filter-todo'])
const currentFilter = ref('all')

const handleFilter = (type) => {
  currentFilter.value = type
  emit('filter-todo', type)
}
</script>

<style scoped>
.todo-footer {
  margin: 20px 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-buttons {
  display: flex;
  gap: 10px;
}
</style>
